<template>
  <div class="wrapper router">
    <ul class="router-nav">
      <li><a href="">首页</a></li>
      <li v-if="query.brandId"><span class="divider"></span></li>
      <li v-if="query.brandId"><span>{{query.brandId}}</span><a @click="deleteBrand(query.brandId)">X</a></li>
      <li v-if="query.categoryId"><span class="divider"></span></li>
      <li v-if="query.categoryId"><span>{{query.categoryId}}<a @click="deleteCategory(query.categoryId)">X</a></span></li>
    </ul>
    <div class="sch-result">
      <span class="fl">共<span class="num">{{total}}</span>个产品</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SearchWrapper',
  props: {
    total: Number,
    query: {
      type: Object,
      default: () => {
        return {
          commodityName: null,
          brandId: null,
          categoryId: null
        }
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    deleteBrand (id) {
      this.query.brandId = null
      this.$router.push({path: '/searchGood', query: { commodityName: this.query.commodityName, brandId: this.query.brandId, categoryId: this.query.categoryId }})
      this.$router.go(0)
    },
    deleteCategory (id) {
      this.query.categoryId = null
      this.$router.push({path: '/searchGood', query: { commodityName: this.query.commodityName, brandId: this.query.brandId, categoryId: this.query.categoryId }})
      this.$router.go(0)
    }
  }
}
</script>
<style>
</style>
